<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板语法</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
   <!-- 
      模板语法两种形式：
        1.插值语法------用于解析标签体的内容
        2.指令语法------用于解析标签，包括 标签属性、标签事件、标签体内容...
                                    也就是指令语法它基本上能把标签各个位置都能解析
          通常都是v-xxx的形式
    -->
    
    <!-- 准备好一个容器 -->
    <div id="root">
      <h1>插值语法</h1>
      <h3>
        你好，{{name}}
      </h3>
      <hr>
      <h1>指令语法</h1>
      <h3>
        <a v-bind:href="url" >百度</a>
        <!-- <a :href="url" >百度</a> -->

      </h3>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false  //阻止 vue 在启动时出现生产提示
    
    const x = new Vue({
        el:'#root',
        data:{
            name:'周杰',
            url:'https://www.baidu.com'
        }
    })
    </script>
</body>
</html>